<template>
  <div class="mod-config">
      <el-tabs type="border-card" @tab-click="cardUpgrade">
        <el-tab-pane label="会员积分升级">
          <div class="avue-crud">
            <el-table :data="dataList" height="calc(100vh - 215px)" border v-loading="dataListLoading">
              <el-table-column prop="complainNum" label="投诉单号"></el-table-column>
              <el-table-column prop="customerCard" label="会员卡号"></el-table-column>
              <el-table-column prop="customerName" label="会员姓名"></el-table-column>
              <el-table-column prop="complaintsType" label="投诉类型"></el-table-column>
              <el-table-column prop="createTime" label="投诉时间"></el-table-column>
              <el-table-column prop="estimatedProcessingDate" label="预处理时间"></el-table-column>
              <el-table-column prop="dealDate" label="处理时间"></el-table-column>
              <el-table-column prop="status" label="处理状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status == '1'">已处理</span><span v-else-if="scope.row.status == '2'">处理中</span><span
                    v-else>未处理</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-printer" :disabled="scope.row.status == '1'" @click="addOrUpdateHandle(scope.row.id)">处理</el-button>
                  <el-button type="text" icon="el-icon-delete" :disabled="scope.row.status" @click="addOrUpdateHandle(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="avue-crud__pagination">
            <!-- <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageIndex"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="totalPage"
              background
              layout="total, sizes, prev, pager, next, jumper">
            </el-pagination> -->
          </div>
          <!-- 弹窗, 新增 / 修改 -->
          <!-- <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form> -->
        </el-tab-pane>
        <el-tab-pane label="会员卡升级">
          <div class="text item">
            <el-button-group style="margin-bottom: 10px;">
              <el-button type="primary" icon="el-icon-search" @click="getCustomerList">查询</el-button>
              <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
            </el-button-group>
            <el-form inline label-width="70px" @keyup.enter.native="getCustomerList">
              <el-form-item label="会员卡号">
                <el-input v-model="card.dataForm.customerCard"></el-input>
              </el-form-item>
              <el-form-item label="顾客姓名">
                <el-input v-model="card.dataForm.name"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="card.dataForm.phone1"></el-input>
              </el-form-item>
              <el-form-item label="顾客性别">
                <el-select v-model="card.dataForm.gender">
                  <el-option value="0" label="男"></el-option>
                  <el-option value="1" label="女"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="会员年龄">
                <el-row>
                  <el-col :span="11">
                    <el-input v-model="card.dataForm.age"></el-input>
                  </el-col>
                  <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                  <el-col :span="11">
                    <el-input></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="部门">
                <el-select v-model="card.dataForm.saleDeptId">
                  <el-option v-for="item in card.deptOptions" :key="item.value" :value="item.value" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="avue-crud" style="margin-top: 10px;">
            <el-table :data="card.dataList" border v-loading="card.dataListLoading" :max-height="tableHeight">
              <el-table-column prop="customerCard" label="会员卡号"></el-table-column>
              <el-table-column prop="name" label="会员姓名"></el-table-column>
              <el-table-column prop="integral" label="会员积分">
                <template slot-scope="scope">
                  <span v-if="scope.row.integral">{{scope.row.integral}}</span><span v-else>0</span>
                </template>
              </el-table-column>
              <el-table-column prop="cardType" label="会员类型">
                <template slot-scope="scope">
                  <span v-if="scope.row.cardType == '1'">会员卡</span><span v-else>非会员</span>
                </template>
              </el-table-column>
              <el-table-column prop="gender" label="性别">
                <template slot-scope="scope">
                  <span v-if="scope.row.gender == '0'">男</span>
                  <span v-if="scope.row.gender == '1'">女</span>
                </template>
              </el-table-column>
              <el-table-column prop="age" label="年龄"></el-table-column>
              <el-table-column prop="phone1" label="联系电话"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-medal" @click="customerUpgradeByCard(scope.row)">升级</el-button>
                  <el-button type="text" icon="el-icon-collection" @click="checkCustomerDetail(scope.row.id)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="avue-crud__pagination">
            <el-pagination @size-change="sizeChangeHandleByCard" @current-change="currentChangeHandleByCard"
              :current-page="card.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="card.pageSize" :total="card.totalPage"
              background layout="total, sizes, prev, pager, next">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="会员升级记录">
            <div class="text item">
              <el-button-group style="margin-bottom: 10px;">
                <el-button type="primary" icon="el-icon-search" @click="getCustomerRecordList">查询</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
              </el-button-group>
              <el-form inline label-width="70px">

                    <el-form-item label="会员卡号">
                      <el-input v-model="record.dataForm.curCustomerCard"></el-input>
                    </el-form-item>

                    <el-form-item label="顾客姓名">
                      <el-input v-model="record.dataForm.customerName"></el-input>
                    </el-form-item>

                    <el-form-item label="升级日期">
                      <el-row>
                        <el-col :span="11">
                          <el-date-picker v-model="record.dataForm.upgradeDateMin" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2" style="text-align: center;">-</el-col>
                        <el-col :span="11">
                          <el-date-picker v-model="record.dataForm.upgradeDateMax" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-col>
                      </el-row>
                    </el-form-item>
              </el-form>
            </div>

          <div class="avue-crud" style="margin-top: 10px;">
            <el-table :data="record.dataList" border v-loading="record.dataListLoading" :max-height="tableLogHeight">

              <el-table-column prop="customerName" label="会员姓名"></el-table-column>
              <el-table-column prop="curCustomerCard" label="会员卡号"></el-table-column>
              <el-table-column prop="upgradeDate" label="升级日期"></el-table-column>
              <el-table-column prop="originalCardType" label="升级前">
                <template slot-scope="scope">
                  <span v-if="scope.row.originalCardType == '1'">会员卡</span>
                  <span v-else>非会员</span>
                </template>
              </el-table-column>
              <el-table-column prop="curCardType" label="升级后">
                <template slot-scope="scope">
                  <span v-if="scope.row.curCardType == '1'">会员卡</span>
                  <span v-else>非会员</span>
                </template>
              </el-table-column>
              <el-table-column prop="intergralChange" label="扣除积分"></el-table-column>
              <el-table-column prop="curIntegral" label="升级后积分">
                <template slot-scope="scope">
                  <span v-if="scope.row.curIntegral">{{scope.row.curIntegral}}</span>
                  <span v-else>0</span>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="text" icon="el-icon-collection" @click="checkRecordDetail(scope.row.id)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="avue-crud__pagination">
            <el-pagination @size-change="sizeChangeHandleByRecord" @current-change="currentChangeHandleByRecord"
              :current-page="record.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="record.pageSize" :total="record.totalPage"
              background layout="total, sizes, prev, pager, next">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
      <customer-detail v-if="customerDetailVisible" ref="customerDetailDialog"></customer-detail>
      <!-- 弹窗，查看升级记录详情 -->
      <record-detail v-if="recordDetailVisible" ref="resordDetailDialog"></record-detail>
  </div>
</template>

<script>
  //import {customerComplaintFetchList,customerComplaintDelObj} from '@/api/eims/customer-complaint.js'
  import { mapGetters } from 'vuex'
  import { customerCardUpgrade, customerCardFetchList, customerCardRecord } from '@/api/eims/customer-upgrade'
  import { fetchTree } from '@/api/admin/dept'
  import { fetchCustomerList } from '@/api/eims/customer'

  import CustomerDetail from '../customer/detail.vue'
  import RecordDetail from './record.vue'

  export default {
    data() {
      return {
        fleg1: false,
        fleg2: false,
        fleg3: false,
        card: {
          deptOptions: [],
          dataForm: {},
          dataList: [],
          dataListLoading: false,
          pageIndex: 1,
          pageSize: 100,
          totalPage: 0,
        },
        record: {
          dataForm: {},
          dataList: [],
          dataListLoading: false,
          pageIndex: 1,
          pageSize: 100,
          totalPage: 0,
        },
        recordDetailVisible: false,
        customerDetailVisible: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        detailVisible: false
      }
    },
    components: {
      RecordDetail,
      CustomerDetail
    },
    created() {
      this.getDeptList()
    },
    computed: {
      ...mapGetters(['permissions']),
      tableHeight: function(){
        return window.innerHeight - 260
      },
      tableLogHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      // 查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getCustomerList()
      },
      // 清空搜索框
      searchReset() {
        this.card.dataForm = {}
        this.record.dataForm = {}
      },
      // 改变标签卡
      cardUpgrade(val) {
        this.searchReset()
        if (val.index == '0') {
          // 积分升级
        } else if (val.index == '1') {
          // 会员卡升级
          this.getCustomerList()
        } else {
          // 会员升级记录
          this.getCustomerRecordList()
        }
      },
      // 获去部门列表
      getDeptList() {
        fetchTree().then(result => {
          let resultData = result.data.data
          let list = []
          resultData.forEach(item => {
            list.push({
              value: item.id,
              name: item.name
            })
          })
          this.deptOptions = list
        })
      },
      // 会员卡升级---顾客信息列表
      getCustomerList() {
        this.card.dataListLoading = true
        let pageData = {
          current: this.card.pageIndex,
          size: this.card.pageSize
        }
        fetchCustomerList(Object.assign(this.card.dataForm, pageData)).then(response => {
          if(response.data.code == '0'){
            this.card.dataList = response.data.data.records
            this.card.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.card.dataListLoading = false
        })
      },
      // 会员卡升级---每页数
      sizeChangeHandleByCard(val) {
        this.card.pageSize = val
        this.card.pageIndex = 1
        this.getCustomerList()
      },
      // 会员卡升级---当前页
      currentChangeHandleByCard(val) {
        this.card.pageIndex = val
        this.getCustomerList()
      },
      // 会员卡升级---升级
      customerUpgradeByCard(obj) {
        obj.cardType = (obj.cardType == '1') ? '0' : '1'
        let params = {
          id: parseInt(obj.id),
          cardType: parseInt(obj.cardType)
        }
        customerCardUpgrade(params).then(response => {
          if(response.data.code == '0'){
            this.$message.success('升级成功')
            this.getCustomerList()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 会员卡升级---详情
      checkCustomerDetail(id) {
        this.customerDetailVisible = true
        this.$nextTick(() => {
          this.$refs.customerDetailDialog.init(id)
        })
      },
      // 会员卡升级记录---列表
      getCustomerRecordList() {
        this.record.dataListLoading = true
        let pageData = {
          current: this.record.pageIndex,
          size: this.record.pageSize
        }
        customerCardRecord(Object.assign(this.record.dataForm, pageData)).then(response => {
          if(response.data.code == '0'){
            this.record.dataList = response.data.data.records
            this.record.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.record.dataListLoading = false
        })
      },
      // 会员卡升级记录---每页数
      sizeChangeHandleByRecord(val) {
        this.record.pageSize = val
        this.record.pageIndex = 1
        this.getCustomerRecordList()
      },
      // 会员卡升级记录---当前页
      currentChangeHandleByRecord(val) {
        this.record.pageIndex = val
        this.getCustomerRecordList()
      },
      // 查看记录详情
      checkRecordDetail(id) {
        this.recordDetailVisible = true
        this.$nextTick(() => {
          this.$refs.resordDetailDialog.init(id)
        })
      }
    }
  }
</script>
